<template>
  <a-config-provider :locale="locale">
    <div class="basic-layout">
      <LeftBar />
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </a-config-provider>
  <Bottom v-if="require" />
</template>

<script setup lang="ts">
import Bottom from '@/components/Bottom.vue'
import locale from 'ant-design-vue/es/locale/zh_CN'
import LeftBar from '@/components/LeftBar.vue'
const require = Boolean(window.require)

</script>

<style lang="scss">
@import "@/styles/index.scss";

.basic-layout {
  display: flex;

  .left-bar {
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(88, 112, 127);
    font-size: 1em;
    height: 100vh;
    min-width: 60px;
    max-width: 60px;
    width: 60px;
    background: rgb(51, 51, 51);

    .bar-item {
      width: 100%;
      text-align: center;
      padding: 15px 0;
      cursor: pointer;
      position: relative;
      transition: .2s;

      &.active {
        color: #f9f9f9;
      }

      &.active:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background: #f9f9f9;
      }
    }
  }
}
</style>
